<template>
  <div class="content" :style="{'margin-left':getSystemConfig.isCollapse?'64px':'200px'}">
    <HeaderBar/>
    <div class="content-inner">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import HeaderBar from '@/components/headerbar'
import { mapMutations , mapGetters} from 'vuex'
export default {
   name:"content-inner",
   computed:{
     ...mapGetters('system',[
       'getSystemConfig'
     ])
   },
   methods:{
     ...mapMutations('system',[
       'setSidebarCollapse'
     ])
   },
   components:{
     HeaderBar
   }     
};
</script>

<style>
</style>
<style lang="less">
    .content{
       transition: margin-left 0.35s; 
       .content-inner{
         height: calc(100vh - 40px);
         padding: 10px 15px;
         overflow: auto;
         background-color: #f1f1f1;
       }
    }
</style>